---
title: Breadcrumb
description: Used to display a page's location within a site's hierarchical structure
links:
  source: components/breadcrumb
  storybook: components-breadcrumb--basic
  recipe: breadcrumb
---

<ExampleTabs name="breadcrumb-basic" />

## Anatomy

```jsx
import { Breadcrumb } from '@saas-ui/react/breadcrumb'
```

```jsx
<Breadcrumb.Root separator="/">
  <Breadcrumb.Link href="#">Workspace</Breadcrumb.Link>
  <Breadcrumb.Ellipsis />
  <Breadcrumb.CurrentLink>Projects</Breadcrumb.CurrentLink>
</Breadcrumb.Root>
```

## Examples

### Sizes

Use the `size` prop to change the size of the breadcrumb component

<ExampleTabs name="breadcrumb-with-sizes" />

### Variants

Use the `variant` prop to change the appearance of the breadcrumb component

<ExampleTabs name="breadcrumb-with-variants" />

### With Separator

Use the `separator` prop to add the separator

<ExampleTabs name="breadcrumb-with-separator" />

### Icon

Here's how you can add an icon to the breadcrumb

<ExampleTabs name="breadcrumb-with-icon" />

### Menu

Compose the breadcrumb with menu component

<ExampleTabs name="breadcrumb-with-menu" />

### Ellipsis

Render the `BreadcrumbEllipsis` component to show an ellipsis

<ExampleTabs name="breadcrumb-with-ellipsis" />

### Routing Library

Use the `asChild` prop to change the underlying breadcrumb link

```jsx
// import { Link } from "next/link"

<BreadcrumbRoot>
  <BreadcrumbLink asChild>
    <Link href="/docs">Docs</Link>
  </BreadcrumbLink>
</BreadcrumbRoot>
```

## Props

### Root

<PropTable component="Breadcrumb" part="Root" />
